<template>
	<div class="main">
		<div class="input">
			<div class="div">
				商品名称:<el-input v-model="shopname" style="width: 240px" />
			</div>

			<div class="div">
				商品编号:<el-input v-model="shopid" style="width: 240px" />
			</div>

			<div class="div">
				商品分类:
				<select v-model="type">
					<option v-for="item in options" :key="item" :value="item">
						{{item}}
					</option>
					<option value="" disabled selected hidden>请选择分类</option>
				</select>
			</div>


		</div>
		<div class="input">
			<div class="div">
				是否过期:
				<select id="overdue">
					<option value="全部" selected>全部</option>
					<option value="过期">过期</option>
					<option value="未过期">未过期</option>
				</select>
			</div>

			<div class="div">
				是否上架:
				<select id="shelves">
					<option value="全部" selected>全部</option>
					<option value="上架">上架</option>
					<option value="下架">下架</option>
				</select>
			</div>

		</div>

		<div class="btn">
			<el-button type="primary" @click="sai">检索</el-button>
			<el-button type="primary" @click="show">显示全部</el-button>
			<el-button type="success" @click="add">新增商品</el-button>
		</div>

		<div>
			<el-table ref="table" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
				:cell-class-name="tableRowClassName" empty-text="暂无数据">
				<el-table-column prop="name" label="商品" width="120">
					<template #default="scope">
						<div class="img">
							<el-image :preview-src-list="srcList" :src="scope.row.img"></el-image>
							<span style="position: absolute;">商品示例图</span>
						</div>
						<span>{{scope.row.name}}</span>
					</template>
				</el-table-column>
				
				<el-table-column prop="price" label="价格" width="120">
					<template #default="scope">
						{{scope.row.price}}元
					</template>
				</el-table-column>
				<el-table-column prop="sold" label="销量" width="120" />
				<el-table-column prop="inventory" label="库存" width="120" />
				<el-table-column prop="refund" label="退款数量" width="120" />
				<el-table-column label="退款金额" width="120">
					<template #default="scope">
						{{scope.row.price * scope.row.refund}}元
					</template>
				</el-table-column>
				<el-table-column label="操作" width="120">
					<template #default="scope">
						{{scope.row.role}}
						<el-button :type="scope.row.role ? 'danger' : 'primary'" @click="btn(scope.row.index)">
							{{scope.row.role ? '下架' : '上架'}}
						</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="intendant" label="管理员" width="120" />
				<el-table-column prop="time" label="更新时间" width="220" />
			</el-table>
		</div>
	</div>
</template>
<script>
	import mockjs from "@/mockjs/index.js"
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	// import * as XLSX from 'xlsx'

	export default {
		data() {
			return {
				shopname: '',
				shopid: '',
				tableData: '',
				list: '',
				list2: '',
				options: [
					'男装', '女装', '帽子', '鞋子'
				],
				type: '',
			}
		},
		methods: {
			sai() {
				let i = document.getElementById('shelves').value;
				let x = document.getElementById('overdue').value;
				if (this.shopname != '') {
					let msg = this.shopname.split('')
					this.tableData = this.list.filter(item => {
						for (let m of msg) {
							return item.name.indexOf(m) != -1
						}
					})
					this.list = this.tableData
				}
				if(this.shopid != ''){
					this.tableData = this.list.filter(item=>{
						return item.id == Number(this.shopid)
					})
					this.list = this.tableData
				}
				if(this.type != ''){
					this.tableData = this.list.filter(item=>{
						return item.type == this.type
					})
					this.list = this.tableData
				}
				if(x != ''){
					if(x == '全部') this.tableData = this.list;
					if(x == '过期'){
						this.tableData = this.list.filter(item=>{
							return item.state == false
						})
					}
					if(x == '未过期'){
						this.tableData = this.list.filter(item=>{
							return item.state == true
						})
					}
					this.list = this.tableData
				}
				if(i != ''){
					if(i == '全部') this.tableData = this.list;
					if(i == '上架'){
						this.tableData = this.list.filter(item=>{
							return item.role == true
						})
					}
					if(i == '下架'){
						this.tableData = this.list.filter(item=>{
							return item.role == false
						})
					}
					this.list = this.tableData
				}
			},
			show() {
				this.shopname = ''
				this.shopid = ''
				this.type = ''
				document.getElementById('shelves').selectedIndex = 0;
				document.getElementById('overdue').selectedIndex = 0;
				this.list = this.list2
				this.tableData = this.list2
			},
			btn(i){
				this.tableData[i].state = !this.tableData[i].state
				console.log(this.tableData[i].state);
				this.list = this.tableData
			},
			tableRowClassName({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				// 把每一行的索引放进row和index
				row.index = rowIndex;
				column.index = columnIndex;
			},
			getTime(time) {
				var date = new Date(time);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let time2 = y + '-' + m + '-' + d
				return time2
			},
		},
		mounted() {
			this.tableData = mockjs.getGoods(2)
			console.log(this.tableData);
			this.list = this.tableData
			this.list2 = this.tableData
		}
	}
</script>

<style scoped>
	.main {
		display: flex;
		flex-wrap: wrap;
		background-color: white;
		flex-direction: column;

	}

	.input {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 15px;
	}

	.input .div:first-child {
		margin-left: 15px;
	}

	.input .div {
		margin-left: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.input .div select {
		border: 1px solid #ebeef5;
		width: 237px;
		height: 32px;
		display: flex;
		align-items: center;
		color: gray;
		outline: none;
		text-indent: 5px;
		margin-left: 5px;
	}

	.btn {
		margin: 20px 20px;
		display: flex;
	}

	.header .el-button {
		margin: 0;
		border-radius: 0;
		border-bottom: 0;
	}

	.header .el-button:active {
		color: aqua;
	}



	.img span {
		font-size: 12px;
		color: white;
	}

	.img {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.el-table /deep/ .cell{
		text-align: center;
	}
	
</style>